import React, { Component } from 'react'
import itemModule from "./item.module.scss"
 class Item extends Component {
     state={
         arr:['',"常吃","不吃","偶爱"]
     }
  render() {
      let {item}=this.props;
      let {arr}=this.state
    return (
      <div className={itemModule.item}>
          <dl>
              <dt>
                  <img src={item.img} alt="" />
              </dt>
              <dd>
                  <div>
                           <h3>{item.name}</h3>
                            <span>{item.weight}</span>
                  </div>
                  <div>
                  <p onClick={this.handleStar}>星星</p>
                            <p>{arr[item.ind]}</p>
                  </div>
              </dd>
          </dl>
          {item.check ? (
                    <ul className={itemModule.uls}>
                        {
                            arr && arr.map((item,index) =>
                            <li key={index} onClick={()=>this.handleTab(index)}>{item}</li> )
                        }
                    </ul>
                ) : null}
      </div>
    )
  }
  handleStar =()=>{
    let {item} = this.props;
    this.props.handleParentStar && this.props.handleParentStar(item);
}
handleTab(ind){
    let {item} = this.props;
    this.props.handleParentLi && this.props.handleParentLi(ind,item)
}
}

export default Item